<template>
	<a-form :form="form" @submit="handleSubmit">
		<a-form-item v-bind="formItemLayout" label="部门" has-feedback>
			<a-select v-decorator="[ 'department_id', {rules: [{ required: true, message: '部门' }]}]" placeholder="部门">
				<a-select-option v-for="(item, index) in departmentList" :key="index" :value="item.id">
					{{ item.department_name.zh }}
				</a-select-option>
			</a-select>
		</a-form-item>
		
		<a-form-item v-bind="formItemLayout" label="房间" has-feedback>
			<a-cascader :options="dataList" :loadData="loadData" changeOnSelect
				v-decorator="[ 'rooms', {rules: [{ required: true, message: '楼宇' }]}]" placeholder="房间" />
		</a-form-item>

		<a-form-item :wrapper-col="{ offset: 2 }">
			<a-button type="primary" html-type="submit" icon="plus">保存</a-button>
		</a-form-item>
	</a-form>
</template>
<script lang="ts">
import { getBuildingList, getUnitList, getFloorList, getRoomList, postData, getDepartmentList, getData, putData } from "~/logicLib/Teacher/officeRoom";
import { Component, Vue, Prop, Emit } from "vue-property-decorator";
import { constants } from "buffer";

@Component({
	name: "OfficeRoom-OpenDrawer",
	layout: "menu"
})
export default class OpenDrawer extends Vue {
	form: any = {};
	departmentList: any[] = [];
	dataList: any[] = [];
	formItemLayout: any = {
		labelCol: { span: 2 },
		wrapperCol: { span: 8 },
    };
	created() {
		this.form = this.$form.createForm(this);
		this.getBuildingData ()
		this.getDepartmentData ()
		if (this.condition) this.getQueryDaata ()
	}
	handleSubmit(e) {
		let that = this
		e.preventDefault();
		that.form.validateFields((err, values) => {
			if (!err) {
				if (that.condition) {
					that.editSubmit(values);
				} else {
					that.addSubmit(values);
				}
			}
		});
	}
	getQueryDaata () {
		let that = this
		getData(that, that.condition).then((val: any) => {
			let data = val.data
			that.form.setFieldsValue({
				department_id: data.department_id,
				rooms: [
					data.buildings_id,
					data.unit_id,
					data.floor_id,
					data.room_id
				]
			})
		});
	}
	getDepartmentData () {
		let that = this
		getDepartmentList(that, '').then((value: any) => {
			that.departmentList = value.data
		});
	}
	getBuildingData () {
		let that = this
		getBuildingList(that, '').then((value: any) => {
			that.dataList = value.data.map(el => {
				let obj = {
					label: el.buildings_name.zh,
					value: el.id,
					state: 1,
					isLeaf: false
				}
				return obj
			})
		});
	}
	buildingChange (obj: any) {
		let that = this
		getUnitList(that, obj.value).then((value: any) => {
			obj.children = value.data.map(el => {
				let obj = {
					label: el.unit_name.zh,
					value: el.id,
					state: 2,
					isLeaf: false
				}
				return obj
			})
			obj.loading = false
			that.dataList = [...that.dataList]
		});
	}
	unitChange (obj: any) {
		let that = this
		getFloorList(that, obj.value).then((value: any) => {
			obj.children = value.data.map(el => {
				let obj = {
					label: el.floor_name.zh,
					value: el.id,
					state: 3,
					isLeaf: false
				}
				return obj
			})
			obj.loading = false
			that.dataList = [...that.dataList]
		});
	}
	floorChange (obj: any) {
		let that = this
		getRoomList(that, obj.value).then((value: any) => {
			obj.children = value.data.map(el => {
				let obj = {
					label: el.name.zh,
					value: el.id,
					state: 4
				}
				return obj
			})
			obj.loading = false
			that.dataList = [...that.dataList]
		});
	}
	
	loadData (data) {
		let that = this
		const Obj = data[data.length - 1];
		Obj.loading = true;
		if (Obj.state === 1) that.buildingChange (Obj)
		if (Obj.state === 2) that.unitChange (Obj)
		if (Obj.state === 3) that.floorChange (Obj)
	}
	addSubmit(data: any) {
		let that = this
		let Obj = {
			buildings_id: data.rooms[0],
			unit_id: data.rooms[1],
			floor_id: data.rooms[2],
			room_id: data.rooms[3],
			department_id: data.department_id
		}
		postData(that, Obj).then((value: any) => {
			that.requery ()
		});
	}
	editSubmit(data: any) {
		let that = this
		let Obj = {
			id: that.condition,
			buildings_id: data.rooms[0],
			unit_id: data.rooms[1],
			floor_id: data.rooms[2],
			room_id: data.rooms[3],
			department_id: data.department_id
		}
		putData(that, Obj).then((value: any) => {
			that.requery ()
		});
	}
	
	@Prop({type: [Boolean, Number], default: false})
	condition!: boolean;

	@Emit("requery")
	requery() {}
}
</script>
